<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>

	<head>
	<meta charset="UTF-8">
		 <meta http-equiv="X-UA-Compatible" content="IE=edge">
		 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<link href="css/mui.min1.css" rel="stylesheet" />
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<style type="text/css">
			.row>div{
				height: 60px;
				padding-left: 0px;
				
			}
			.icon1{
				margin-top: 20px;
				margin-left: 25px;
			}
			.touxiang>img{
				border: 1px solid red;
				border-radius: 50%;
			}
			.touxiang>span{
				display: inline-block;
				line-height: 60px;
			}
			.touxiang>button{
				width: 60px;
				height: 26px;
				border: 1px solid red;
				color: red;
				padding: 0px 3px;
				border-radius: 20px;
				margin-left:200px;
				margin-top: -41px;
			}
			.icon2{
				margin-top: 15px;
				margin-left:5px;
			}
			.tu{
				
				width: 100%;
				height: 429px;
				background:#C7C7CC ;
				margin: 0px auto;
			}
			.content{
				margin: 0px auto;
				width: 90%;
				border: 1px solid red;
				margin-top:120px;
				
			}
			.pinglun{
				width: 180px;
				height: 30px;
				border: none;
				background: #F6F6F6;
				border-radius: 20px;
				color: #7A7A7A;
				line-height: 12px;
				margin-left: 20px;
			}
			.dibu{
				width: 100%;
				height: 55px;
				border-top:2px solid #F6F6F6 ;
				line-height: 55px;
				background-color: white;
				position: fixed;
				bottom: 0px;
				z-index: 2;
			}
			.icon3,.icon{
				vertical-align: middle;
			}
			.icon3{
				margin-left: 15px;
			}
			.youxia>span{
				margin-right: 8px;
			}
			.youxia{
				margin-top: -55px;
				width: 200px;
				height: 55px;
				text-align: center;
				position: absolute;
				right: 0px;
			}
			.qi{
				border: 1px solid blue;
				height: 500px;
				margin-top: 30px;
			}
			.qi p{
				font-size: 18px;
				margin-top: 20px;
				margin-left:15px;
			}
			.toutou>img{
				border: 1px solid black;
				width: 45px;
				height: 45px;
				display: inline-block;
				border-radius: 50%;
				margin: 8px 20px;
			}
			
			.suo input{
				border: 1px solid #C0C0C0;
				height: 45px;
				width: 260px;
				margin-top: 10px;
				margin-left: 20px;
				border-radius:20px;
			}
			.toutou1>img{
				border: 1px solid black;
				width: 45px;
				height: 45px;
				display: inline-block;
				border-radius: 50%;
				margin: 8px 20px;
				margin-left: 5px;
				margin-top: 25px;
			}
			.xin svg{
				margin-top: 30px;
			}
			.im img{
				border:1px solid black;
				width:400px;
			}
		</style>
	</head>

	<body>
	
		<header>
			<div class="row">
				<div class="col-xs-2">
					<svg xmlns="http://www.w3.org/2000/svg" class="icon1" viewBox="0 0 1024 1024" width="20" height="25" t="1566440247989" p-id="16116" version="1.1"><path fill="#A2A2A2" d="M 766.862 1021.72 c -10.24 0 -20.594 -3.64 -28.444 -10.922 L 228.693 538.396 c -15.701 -14.563 -15.701 -38.229 0 -52.792 L 738.418 13.198 c 15.701 -14.563 41.187 -14.563 56.889 0 c 15.701 14.564 15.701 38.23 0 52.793 L 314.027 512 l 481.28 446.009 c 15.701 14.563 15.701 38.23 0 52.793 c -7.851 7.282 -18.205 10.922 -28.445 10.922 Z" p-id="16117" /></svg>
				</div>
				<div class="col-xs-8 touxiang">
					<img src="img/${notes.avatar }"  width="40px" height="40px"/>
					<span>${notes.username }</span>
					<button type="submit">关注</button>
				</div>
				<div class="col-xs-2">
					<svg t="1566706153300" class="icon2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3630" width="30" height="30"><path d="M928 480c-17.664 0-32 14.336-32 32l0 320c0 17.664-14.336 32-32 32L160 864c-17.664 0-32-14.336-32-32L128 288c0-17.664 14.336-32 32-32l224 0 0 0c0 0 0 0 0 0 17.664 0 32-14.336 32-32s-14.336-32-32-32c-1.024 0-1.888 0.48-2.88 0.576L160.384 192.576c-52.96 0-95.904 43.008-95.904 96.064l0 543.872c0 53.056 42.944 96.064 95.904 96.064l704.224 0c52.96 0 95.904-43.008 95.904-96.064L960.512 512 960 512C960 494.336 945.664 480 928 480zM402.688 620.768c-1.92 4.128-3.168 8.608-3.168 13.44 0 17.664 14.336 32 32 32 15.456 0 27.744-11.168 30.752-25.76l0.64 0c37.12-189.696 193.984-336.256 388.672-358.272l-67.776 67.776c-12.512 12.512-12.512 32.768 0 45.248 12.512 12.512 32.768 12.512 45.248 0l122.528-122.528c12.512-12.512 12.512-32.768 0-45.248l-122.528-122.528c-12.512-12.512-32.768-12.512-45.248 0-12.512 12.512-12.512 32.768 0 45.248l67.52 67.52C628.256 239.872 448.224 405.408 402.688 620.768z" p-id="3631" fill="#353535"></path></svg>
				</div>
			</div>
		</header>
			<div class="tu">
				<span class="im"><img src="img/${notes.picture }"/></span>
			</div>
			<div class="content">
				${notes.content }
			</div>
			<div class="dibu">
				<i class="icon4"></i>
				
				<input type="text" placeholder="说点什么..." class="pinglun"/>
				
				<div class="youxia">
					<svg t="1566708071421" class="icon3" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4467" width="25" height="25"><path d="M512 868.04c-3.36 0-6.71-0.81-9.76-2.44-4.11-2.19-101.77-54.63-200.96-140.63C165.73 607.45 97 489.31 97 373.83c0-120.14 97.74-217.87 217.88-217.87 100.98 0 167.42 63.62 197.13 99.95 29.71-36.33 96.14-99.95 197.13-99.95C829.26 155.96 927 253.7 927 373.83c0 115.48-68.73 233.62-204.28 351.14-99.19 85.99-196.85 138.44-200.96 140.63-3.05 1.63-6.4 2.44-9.76 2.44zM314.88 197.46c-97.25 0-176.38 79.12-176.38 176.37 0 225.47 313.68 415.51 373.49 449.69 59.82-34.21 373.51-224.45 373.51-449.69 0-97.25-79.12-176.37-176.38-176.37-114.51 0-178.74 103.37-179.37 104.41a20.792 20.792 0 0 1-17.74 9.98h-0.05c-7.26-0.02-13.99-3.81-17.74-10.02-0.61-1-64.84-104.37-179.34-104.37z" p-id="4468" fill="#474747"></path></svg>
					<span>213</span>
					<svg t="1566708157434" class="icon" viewBox="0 0 1057 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5454" width="18" height="18"><path d="M1053.009962 381.831718A75.969978 75.969978 0 0 0 990.912762 330.304254l-273.822226-39.306206-119.57014-248.388799a77.291195 77.291195 0 0 0-138.067179 0l-119.57014 248.388799L66.060851 330.304254a75.969978 75.969978 0 0 0-62.0972 51.527464 72.99724 72.99724 0 0 0 17.83643 75.639674l201.485595 201.155291-46.903204 279.107094a73.657849 73.657849 0 0 0 31.378904 72.666936 77.951804 77.951804 0 0 0 80.924542 4.293956L528.486807 885.545705l239.800888 129.148964a77.951804 77.951804 0 0 0 80.924542-4.293956 73.657849 73.657849 0 0 0 31.378904-72.666936l-46.903204-279.107094 201.485595-201.155291a72.99724 72.99724 0 0 0 17.83643-75.639674z m-273.822227 224.937197A72.99724 72.99724 0 0 0 759.699784 670.517636l46.903204 279.107094-239.800888-129.148963a77.951804 77.951804 0 0 0-73.988153 0l-241.122105 129.148963L297.273829 670.517636a72.99724 72.99724 0 0 0-20.809168-63.748721l-201.485595-201.155291L351.443726 363.334679a76.300283 76.300283 0 0 0 57.472941-41.94864L528.486807 74.318457l119.57014 248.058495A76.300283 76.300283 0 0 0 705.529887 363.334679l275.143443 40.957728z" fill="#474747" p-id="5455"></path></svg>
					<span>179</span>
					<svg t="1566708281876" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6419" width="22" height="22"><path d="M511.999488 847.882863c-28.734592 0-56.729303-2.604314-83.969807-7.099698L231.232673 960.185602 231.232673 761.40735C128.618486 689.355337 62.772174 578.889433 62.772174 454.825836c0-217.07906 201.129864-393.058051 449.228338-393.058051 248.084146 0 449.228338 175.980014 449.228338 393.058051C961.227826 671.917176 760.083635 847.882863 511.999488 847.882863zM511.999488 117.91762c-217.086932 0-393.074156 150.851707-393.074156 336.907193 0 114.166179 66.421434 214.898395 167.761552 275.820929l-1.768346 130.234133 132.171551-79.455633c30.4487 6.497994 62.117231 10.308787 94.910422 10.308787 217.101258 0 393.073132-150.825101 393.073132-336.907193C905.073644 268.769326 729.10177 117.91762 511.999488 117.91762zM736.614169 510.976694c-31.011542 0-56.154182-25.128307-56.154182-56.150858 0-31.010271 25.14264-56.151881 56.154182-56.151881s56.154182 25.14161 56.154182 56.151881C792.768351 485.848387 767.624687 510.976694 736.614169 510.976694zM511.999488 510.976694c-31.010518 0-56.153158-25.128307-56.153158-56.150858 0-31.010271 25.14264-56.151881 56.153158-56.151881 31.011542 0 56.154182 25.14161 56.154182 56.151881C568.15367 485.848387 543.01103 510.976694 511.999488 510.976694zM287.385831 510.976694c-31.010518 0-56.153158-25.128307-56.153158-56.150858 0-31.010271 25.14264-56.151881 56.153158-56.151881s56.153158 25.14161 56.153158 56.151881C343.53899 485.848387 318.39635 510.976694 287.385831 510.976694z" p-id="6420" fill="#474747"></path></svg>
					<span>19</span>
				</div>
			</div>
			<div class="qi">
				<p>共${fn:length(commentList) }条评论</p>
				<div class="row">
					<div class="col-xs-2 toutou">
					<img src="img/${notes.avatar }" />
						
					</div>
					<div class="col-xs-10 suo">
						<input class="shuo" placeholder="说点什么..."/>
					</div>
					
					<c:forEach items="${commentList }" var = "comm">
							<div class="col-xs-12">
								<div class="col-xs-2 toutou1">
									<img src="img/${comm.avatar }"/>
								</div>
								<div class="col-xs-8 toutou">
									<p class="nicheng" style="margin-left: 10px;">${comm.username }</P>
									<p class="pin" style="color: black;font-size: 17px;margin-top: 5px;">${comm.comment }<span style="color: #C0C0C0;font-size: 12px;">08-20</span></p>
								</div>
								<div class="col-xs-2 xin">
									<svg t="1566708071421" class="icon3" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4467" width="25" height="25"><path d="M512 868.04c-3.36 0-6.71-0.81-9.76-2.44-4.11-2.19-101.77-54.63-200.96-140.63C165.73 607.45 97 489.31 97 373.83c0-120.14 97.74-217.87 217.88-217.87 100.98 0 167.42 63.62 197.13 99.95 29.71-36.33 96.14-99.95 197.13-99.95C829.26 155.96 927 253.7 927 373.83c0 115.48-68.73 233.62-204.28 351.14-99.19 85.99-196.85 138.44-200.96 140.63-3.05 1.63-6.4 2.44-9.76 2.44zM314.88 197.46c-97.25 0-176.38 79.12-176.38 176.37 0 225.47 313.68 415.51 373.49 449.69 59.82-34.21 373.51-224.45 373.51-449.69 0-97.25-79.12-176.37-176.38-176.37-114.51 0-178.74 103.37-179.37 104.41a20.792 20.792 0 0 1-17.74 9.98h-0.05c-7.26-0.02-13.99-3.81-17.74-10.02-0.61-1-64.84-104.37-179.34-104.37z" p-id="4468" fill="#474747"></path></svg>
									<span style="margin-left: 20px;margin-top: -10px;">23</span>
								</div>
							</div>
						</c:forEach>
						<!--  <div class="col-xs-2 toutou1">
								<img src="img/book3.jpg"/>
							</div>
							<div class="col-xs-8 toutou">
								<p class="nicheng" style="margin-left: 10px;">对着作业唱征服</P>
								<p class="pin" style="color: black;font-size: 17px;margin-top: 5px;">作者大大很是优秀啊<span style="color: #C0C0C0;font-size: 12px;">08-20</span></p>
							</div>
							<div class="col-xs-2 xin">
								<svg t="1566708071421" class="icon3" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4467" width="25" height="25"><path d="M512 868.04c-3.36 0-6.71-0.81-9.76-2.44-4.11-2.19-101.77-54.63-200.96-140.63C165.73 607.45 97 489.31 97 373.83c0-120.14 97.74-217.87 217.88-217.87 100.98 0 167.42 63.62 197.13 99.95 29.71-36.33 96.14-99.95 197.13-99.95C829.26 155.96 927 253.7 927 373.83c0 115.48-68.73 233.62-204.28 351.14-99.19 85.99-196.85 138.44-200.96 140.63-3.05 1.63-6.4 2.44-9.76 2.44zM314.88 197.46c-97.25 0-176.38 79.12-176.38 176.37 0 225.47 313.68 415.51 373.49 449.69 59.82-34.21 373.51-224.45 373.51-449.69 0-97.25-79.12-176.37-176.38-176.37-114.51 0-178.74 103.37-179.37 104.41a20.792 20.792 0 0 1-17.74 9.98h-0.05c-7.26-0.02-13.99-3.81-17.74-10.02-0.61-1-64.84-104.37-179.34-104.37z" p-id="4468" fill="#474747"></path></svg>
								<span style="margin-left: 20px;margin-top: -10px;">23</span>
							</div> -->
					
				</div>
			</div>
	</body>

</html>